<template>
    <Modal :open="open" title="添加企微号" :footer="null" @cancel="handleCancel" destroyOnClose>
        <div :class="['item', choose ? 'active' : '']" @click="handleChange(1)">
            <div class="title">我已登录过</div>
            <div class="desc">如果您的企微号之前在当前（子）账号下已经登录过，请直接在管理企微号的列表里点击登录！</div>
            <a-button type="primary" @click="handleBack">返回企业微信列表登录</a-button>
        </div>
        <div :class="['item mt16', choose ? '' : 'active']" @click="handleChange(0)">
            <div class="title">我没有登录过（或切换端口）</div>
            <div class="desc">
                扫码登录需要重新分配新的服务器，请先核实您的企微号未曾在当前（子）账号登录过，避免出现安全隐患！新号登录需同步数据请稍后使用。
            </div>
            <a-button type="primary" ghost @click="handleLogin">没有登录过，新号扫码登录</a-button>
        </div>
    </Modal>
    <QCodeModal ref="QCodeRef" />
</template>

<script setup lang="ts">
import {ref} from "vue";
import {Modal} from "ant-design-vue";
import QCodeModal from "./QCodeModal.vue";
const open = ref(false);
const choose = ref(1);
const QCodeRef = ref(null);
// 打开
const handleOpen = () => {
    open.value = true;
};
// 关闭
const handleBack = () => {
    open.value = false;
};
// 取消
const handleCancel = () => {
    open.value = false;
};

// 登录
const handleLogin = async () => {
    QCodeRef.value.show();
    open.value = false;
};
// 切换
const handleChange = num => {
    choose.value = num;
};

defineExpose({
    show: handleOpen,
});
</script>
<style lang="less" scoped>
.item {
    cursor: pointer;
    background: #fff;
    border: 1px solid #e9e9e9;
    padding: 12px;
    border-radius: 4px;
    .title {
        font-size: 18px;
        font-weight: 600;
        color: rgba(0, 0, 0, 0.85);
        line-height: 26px;
        margin-bottom: 4px;
    }
    .desc {
        font-size: 14px;
        font-weight: 400;
        color: rgba(0, 0, 0, 0.45);
        line-height: 22px;
        margin-bottom: 12px;
    }
}
.active {
    background: #e0eaff;
    border: 1px solid #a2beff;
}
</style>
